<template>
    <el-card class="card">
        <template #header>
            <div class="card-header">
                <span class="pbtn"></span>
                <span style="font-size: 20px;">个人资料</span>
            </div>
        </template>
        <div style="margin: 10px 0 20px 0;">医生信息</div>
        <el-form label-width="80px" style='margin: 0 100px;'>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <el-form-item label="医生编号">
                    <el-text>{{ doctorList.number }}</el-text>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="doctorList.user.account"></el-input>
                </el-form-item>
                <el-form-item label="医生头像">
                    <!-- <template #default="scope"> -->
                    <el-image style="width: 50px; height: 50px;border-radius: 50%;"
                        :src="`http://127.0.0.1:3000/${doctorList.picture}`" fit="fill" />
                    <!-- </template> -->
                    <!-- <template #file="{ file }"> -->
                    <!-- <el-upload @on-change="changeRole">
                        <el-button link type="primary">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            选择头像
                        </el-button>
                    </el-upload> -->
                    <!-- </template> -->

                </el-form-item>

            </div>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <el-form-item label="医生姓名">
                    <el-input style="width: 83px;" v-model="doctorList.name"></el-input>
                </el-form-item>
                <el-form-item label="医生角色" prop="roleId">
                    <el-select ref="selectRef" v-model="checkedCities" placeholder="请选择" style="width: 200px;" multiple
                        collapse-tags="true">
                        <el-option disabled value='qwe'>
                            <template #default>
                                <el-checkbox v-model="All" :indeterminate="isIndeterminate" @change="checkAll">
                                    全选</el-checkbox>
                            </template>
                        </el-option>
                        <el-checkbox-group v-model="checkedCities" @change="check">
                            <el-option v-for="(item, index) in doctorRoleList" :key="index" disabled :value='item.value'
                                :label="item.label">
                                <template #default>
                                    <el-checkbox :label="item.value" size="small">
                                        <span style="font-size: 12px;"> {{ item.label }}</span>
                                    </el-checkbox>
                                </template>
                            </el-option>
                        </el-checkbox-group>
                        <div style="height: 1px; border-top: 1px solid #ccc;"></div>
                        <div style="float: right; padding: 10px;">
                            <el-link type="primary" @click="pass"
                                style="font-size: 13px; margin-right: 10px;text-decoration: none;">确定</el-link>
                            <el-link @click="out" style="font-size: 13px;text-decoration: none;">取消</el-link>
                        </div>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="医生角色">
                    <div class="m-4">
                        <el-cascader v-model="value2" :options="options" :props="props" clearable />
                    </div>
                </el-form-item> -->
                <el-form-item label="性别">
                    <el-select v-model="value1" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in tion" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </div>

            <el-form-item label="医生简介">
                <el-input style="width: 600px;" v-model="doctorList.description
                    " autosize type="textarea" placeholder="Please input" />
            </el-form-item>
            <el-form-item label="医生擅长">
                <el-input style="width: 600px;" v-model="doctorList.adept" autosize type="textarea"
                    placeholder="Please input" />
            </el-form-item>
        </el-form>
        <el-button type="primary">保存</el-button>
    </el-card>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import api from '@/api'


const doctorList = ref({
    'adept': "擅长儿童腹腔镜及机器人手术，在精准肝切除、小儿肝移植、胆道闭锁、儿童门静脉高压、胆总管囊肿、先天性巨结肠、儿童胰腺疾病、小儿腹部及腹膜后肿瘤、小儿腹股沟斜疝等疾病。",
    'createTime': "2023-04-11 10:11:12",
    'creatorId': "67e98bc0-ee1b-11ed-8459-c76f227caccc",
    'description': "外科学博士，主任医师。任中华医学会小儿外科学分会、中国医师协会儿童重症医学分会、中国研究型医院学会儿童肿瘤专委会、中国妇幼保健协会妇幼微创专业分会、四川省小儿外科专委会等委员。承担国家自然科学基金及省部级多项科研项目。在国内外期刊发表论文40余篇。主要从事小儿普通外科及儿童肝移植。",
    'flag': 0,
    'gender': "男",
    'id': "67e98bc0-ee1b-11ed-8459-c76f227cdft5",
    'msgStatus': 0,
    'name': "靳曙光",
    'number': "20235131622139",
    'picture': "public/upload/6358a2e00fa0a.png",
    'role': {
        id: '67e98bc0-ee1b-11ed-8459-c76f227ca800',
        name: '全科医师',
        description: '为居民提供医疗服务者。',
        createTime: '2023-05-09 11:31:12',
        creatorId: '67e98bc0-ee1b-11ed-8459-c76f227ca8f8',
    },
    roleId: "67e98bc0-ee1b-11ed-8459-c76f227ca800",
    status: 0,
    'tel': "15522223333",
    user: { account: '13622221111', password: '123456' },
    userId: "67e98bc0-ee1b-11ed-8459-c76f227ca1k2"
})
onMounted(() => {
    getAllRoleData()

})
let value1 = ref()

const getDoctorDetail = async (id: any) => {
    const result = await api.systemSetting.doctor.getDoctorDetailApi(id)
    doctorList.value = result.data.data
    doctorList.value.user.account = doctorList.value.user.account
    checkedCities.value = [doctorList.value.role.id]
    console.log(doctorList.value);
    value1.value = doctorList.value.gender
}

getDoctorDetail(localStorage.getItem('user_id'))


const tion = [
    {
        value: '',
        label: '请选择',
    },
    {
        value: '男',
        label: '男',
    },
    {
        value: '女',
        label: '女',
    },
]
// const changeRole = () => {
const doctorRoleList: any = ref([])
const getAllRoleData = async () => {
    const result = await api.systemSetting.role.getAllRoleApi();
    doctorRoleList.value = result.data.data.map((item: any) => {
        return {
            label: item.name,
            value: item.id
        }
    });
}
// getAllRoleData()
//控制全选
const All = ref(false)
const isIndeterminate = ref(false)
//选中的值
const checkedCities: any = ref([])
//确定
const pass = () => {

}
//取消
const out = () => {

}
//选中
const check = (value: string[]) => {
    const checkedCount = value.length
    All.value = checkedCount === doctorRoleList.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < doctorRoleList.value.length
}
//全选
const checkAll = (val: boolean) => {
    isIndeterminate.value = false
    checkedCities.value = val ? doctorRoleList.value.map((item: any) => item.value) : []
    console.log(checkedCities.value);
}
//表单验证提交
// const confirmAddDoctor = async (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     await formEl.validate((valid, fields) => {
//         if (valid) {
//             if (ruleForm.id === '') {
//                 ruleForm.tel = ruleForm.account
//                 ruleForm.roleId = checkedCities.value.join(',')
//                 console.log('ruleForm', ruleForm);
//                 const result = api.ysAdmin.addDoctorApi(ruleForm)
//                 console.log('新增医生', result);
//                 ElMessage({
//                     message: '新增成功',
//                     type: 'success',
//                 })
//             } else {
//                 const result = api.ysAdmin.modifyDoctorApi(ruleForm)
//                 console.log("修改", result);
//                 ElMessage({
//                     message: '修改成功',
//                     type: 'success',
//                 })
//                 formEl.resetFields()
//             }

//         } else {
//             console.log('error submit!', fields)
//         }
//     })
// }
</script>
<style lang='scss' scoped>
.card {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}

.pbtn {
    display: inline-block;
    width: 8px;
    height: 18px;
    border-radius: 20px;
    background-color: #409eff;
    margin-right: 10px;
}
</style>